import { Column,Line  } from '@antv/g2plot';
import React, { useEffect, useState } from "react";

const data = [
    { year: '1991', value: 3 },
    { year: '1992', value: 4 },
    { year: '1993', value: 3.5 },
    { year: '1994', value: 5 },
    { year: '1995', value: 4.9 },
    { year: '1996', value: 6 },
    { year: '1997', value: 7 },
    { year: '1998', value: 9 },
    { year: '1999', value: 1 },
  ];

const MyAntv2 = () => {
    useEffect(() => {
        const line = new Line('container', {
            data,
            xField: 'year',
            yField: 'value'
        });
        line.render();
        // 返回一个清理函数，在组件卸载或下次渲染前执行
        return () => {
            // 如果图表实例存在，则销毁它
            if (line) {
                line.destroy();
            }
        };
      }, []);
    return <div id="container" style={{ width: '400px', height: '400px' }}></div>
  };
  export default MyAntv2 ;
  
  